<template>
    <div class="roles">
        <el-row>
            <el-col :span="24">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>权限管理</el-breadcrumb-item>
                    <el-breadcrumb-item>角色列表</el-breadcrumb-item>
                </el-breadcrumb>
            </el-col>
        </el-row>
        <el-row>
            <el-button type="primary" plain>添加角色</el-button>
        </el-row>

        <div class="table_container">
            <el-table
            :data="rolesData"
            style="width: 100%"
            v-loading="loading" border>
            <el-table-column type="expand">
            <!-- 控制显示表格行数据显示 -->
            <template slot-scope="scope">
                <el-row v-for="firstChildren in scope.row.children" :key="firstChildren.id">
                    <el-col :span="4">
                        <el-tag closable @close="deleteRights(scope.row,firstChildren.id)">{{firstChildren.authName}}</el-tag>
                        <i class="el-icon-arrow-right" v-if="firstChildren.children.length!==0"></i>
                    </el-col>
                    <el-col :span="20">
                        <el-row v-for="secondChildren in firstChildren.children" :key="secondChildren.id">
                            <el-col :span="4">
                                <el-tag closable type="success" @close="deleteRights(scope.row,secondChildren.id)">{{secondChildren.authName}}</el-tag>
                                <i class="el-icon-arrow-right" v-if="secondChildren.children.length!==0"></i>
                            </el-col>
                    
                            <el-col :span="20">
                                <el-tag closable type="warning" @close="deleteRights(scope.row,thirdChildren.id)" v-for="thirdChildren in secondChildren.children" :key="thirdChildren.id">{{thirdChildren.authName}}</el-tag>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <el-row v-if="scope.row.children.length===0">
                    <el-col :span="24">该角色还没有分配权限，请前往分配！</el-col>
                </el-row>
            </template>
            </el-table-column>
            <el-table-column
            label="角色名称"
            prop="roleName"
            width="165px">
            </el-table-column>
            <el-table-column
            label="描述"
            prop="roleDesc"
            width="130px">
            </el-table-column>
            <el-table-column
            label="操作">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" plain icon="el-icon-edit"></el-button>
                <el-button size="mini" type="danger" plain icon="el-icon-delete"></el-button>
                <el-button size="mini" type="warning" plain icon="el-icon-check" @click="openDialog(scope.row)"></el-button>
            </template>
            </el-table-column>
            </el-table>
        </div> 


        <!-- 权限列表树形图弹窗 -->
        <el-dialog title="授权管理" :visible.sync="dialogFormVisible">
            <!-- 树形图 -->
            <div class="tree-container">
                <el-tree
                    :data="data2"
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    :default-expanded-keys="[2, 3]"
                    :default-checked-keys="selectedId"
                    :props="defaultProps"
                    :default-expand-all="true">
                </el-tree>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitGrant()">确 定</el-button>
            </div>
        </el-dialog>
    </div>


</template>

<script>
import {getRoleList,deleteRolesRights,getRightsList,grantRolesRights} from '@/api/api.js'
export default {
    data(){
        return{
            loading:true,
            rolesData: [],
            dialogFormVisible:false,
            data2: [],
            defaultProps: {
            children: 'children',
            label: 'authName'
            },
            selectedId:[],//选中权限的id
            currentRole:{}//当前行的数据-----scope.row

        }
    },
    created(){
        this.initRolesList()
    },
    methods: {
        initRolesList(){
            this.loading=true
            getRoleList().then(res=>{
                console.log(res)
                if(res.meta.status===200){
                    this.rolesData=res.data
                     this.loading=false
                }
            })
        },
        deleteRights(row,rightId) {
            console.log(row,rightId)
            deleteRolesRights({roleId:row.id,rightId:rightId}).then(res=>{
                // console.log(res)
                if(res.meta.status===200){
                    this.$confirm('此操作将永久删除此权限, 是否继续?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                    }).then(() => {
                    row.children=res.data//将删除之后的返回的最新数据赋值给scope.row(每一行的所有数据)，再根据新数据渲染，达到删除数据的前台展示效果
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                        this.$message({
                        type: 'info',
                        message: '已取消删除'
                        });          
                    });
                }
            })
        },
        openDialog(row){
            this.dialogFormVisible=true;
            getRightsList({type:'tree'}).then(res=>{
                console.log(row);
                if(res.meta.status===200){
                    this.data2=res.data
                    this.currentRole=row;
                    //取出当前点击角色的所有权限，遍历得到他的第三个children
                    //取出里面所有项的id赋值给selectedId

                    //遍历之前需要清空之前数组中的数据
                    this.selectedId.length=0

                    this.currentRole.children.forEach(first=>{//item
                        if(first.children&&first.children.length!==0) {
                            first.children.forEach(second=>{
                                if(second.children&&second.children.length!==0) {
                                    second.children.forEach(third=>{
                                        this.selectedId.push(third.id)
                                    })
                                }
                            })
                        }
                    })
                }
            })
        },
        submitGrant(){
            let rids=this.$refs.tree.getCheckedKeys().join(',')//转换为字符串
            //this.$refs.tree.getCheckedKeys()-----获取树形控件中选中项的id，即权限id
            grantRolesRights({roleId:this.currentRole.id,rids:rids}).then(res=>{
                console.log(res)
                if(res.meta.status===200){
                    this.$message({
                        type:'success',
                        message:res.meta.msg
                    })
                    this.dialogFormVisible=false;
                    this.initRolesList();
                }else{
                    this.$message({
                        type:'error',
                        message:'更新失败'
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .roles {
        .table_container {
            padding: 15px 15px 15px 0;
            box-sizing:border-box;
            border:1px solid #EBEEF5;
        }
        .el-tag {
            margin:0 5px 5px 0;
        }
        .tree-container {
            height:300px;
            overflow:auto;
        }
    }
</style>